<!-- 主页 -->
<template>
  <div class="page-main">
    <div class="main">
      <div style="width: 100%; margin: 20px auto; text-align: center;">
        <h1>预约成功</h1>
      </div>
      <div style="width: 100%; padding: 0 15px; font-size: 15px; text-align: left; display: inline-block;">
        <span
          style="width: 100%; display: inline-block; text-indent: 1em;">预约成功！医生助理会在24小时内与您联系，您也可以扫描微信二维码添加医生助理微信。</span>
        <span style="width: 100%; margin-top: 10px; display: inline-block;">工作时间：9:00~21:00</span>
        <span style="width: 100%; margin-top: 2px; display: inline-block;">服务热线：400-061-3939</span>
        <span style="width: 100%; margin-top: 10px; display: inline-block;">患者姓名：{{ state.userName }}</span>
        <span style="width: 100%; margin-top: 2px; display: inline-block;">联系电话：{{ state.phoneNum }}</span>
        <span style="width: 100%; margin-top: 2px; display: inline-block;">患者自诉：{{ state.patientDesc }}</span>
      </div>
      <div style="text-align: center; margin-top: 40px;">
        <span style="width: 100%; font-size: 18px; display: inline-block; font-weight: bold; margin-bottom: 10px;">全国咨询电话<span
            style="color: #5F97DF; margin-left: 8px;">400-061-3939</span></span>
        <van-image :src="state.code_url" style="width: 180px; height: 180px; display: inline-block;" />
        <span style="width: 100%; display: inline-block;">微信扫一扫</span>
      </div>
    </div>
</div>
</template>

<script setup name="complete">


import rcode from '@/assets/image/rcode.png'
import { Dialog, Toast } from "vant";
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

const { ctx, proxy } = getCurrentInstance();
const $router = useRouter();
const $route = useRoute()

const state = reactive({
  title: "39互联网医院-预约成功",
  code_url: rcode,
  userName: '',
  phoneNum: '',
  patientDesc: ''
})

onMounted(() => {
  if ($route.query.userName == undefined || $route.query.phoneNum == undefined) {
    Dialog({
      message: "出错啦，请重新选择患者",
      confirmButtonText: false,
      confirmButtonDisabled: false
    }).then(() => {
      console.log('on close')
    });
  } else {
    state.userName = String($route.query.userName ? $route.query.userName : '')
    state.phoneNum = String($route.query.phoneNum ? $route.query.phoneNum : '')
    state.patientDesc = String($route.query.patientDesc ? $route.query.patientDesc : '')
  }
});
</script>

<style scoped lang="scss">
.page-main {
  width: 100%;

  .main {
    margin: auto;

    .title {
      width: 100%;
      margin: 20px auto;
      text-align: center;
    }
  }
}</style>
